<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
        <hr>
        <h2>一辆：{{car.brand}} 车，价值：{{car.price}} 万</h2>
        <button @click="changePrice">修改汽车的价格</button>
        <button @click="changeCar">修改汽车</button>
        <h2>玩的游戏：</h2>
        <ul>
            <li v-for="g in games" :key="g.id">{{g.name}}</li>
        </ul>
        <button @click="changeGame">改变第二个游戏</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { ref ,reactive} from "vue"
//数据
let name = ref("张三")
let age = ref(18)
let tel = '13847382122'
//方法
const changeName = () => {
    name.value += '~'
}
const changeAge = () => age.value++
const showTel = () => alert(tel)

// -----------------------------
//reactive所定义的数据是深层次的！！！
let car =reactive( {
    brand: '奔驰',
    price: 100
})
// let car =ref( {
//     brand: '奔驰',
//     price: 100
// })

function changePrice(){
    car.price+=10;
    // car.value.price+=10;
}
function changeCar(){
    //重新分配一个对象
    //这种情况在reactive 定义的响应式对象是行不通的！
    // car={brand:"宝马",price:200}

    //看看这种写法,这样替换才行！！！
    Object.assign(car,{brand:"宝马",price:200})
}


let games=reactive([
    {id:"ajsdjs",name:'原神'},
    {id:"ajsdjs",name:'王者'},
    {id:"ajsdjs",name:'三国志'}
])

function changeGame(){
    games[1].name="明日之后"
}

</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
li{
    font-size: 20px;
}
</style>